<template>
  <div>
    <div v-show="open" >
      <div v-for="(reply, index) in replies" :key="index">
        <el-row>
          <el-col :span="1">
            <img v-if="reply.reply_to" style="width: 35px; height: 35px; border-radius: 50%; margin-top: 5px;" :src="reply.write_by.avatar"/>                    
            <img v-if="reply.reply_to === null" style="width: 42px; height: 42px; border-radius: 50%; margin-top: 5px;" :src="reply.write_by.avatar"/>                    
          </el-col>
          <el-col :span="23">
            <el-row >
              <ul class="detail" style="justify-content:left; display: flex; align-items: center; ">
                <li >
                  <a @click="goUser(reply.write_by.username)">{{reply.write_by.username}}</a>
                </li>
                <li>
                  {{reply.reply_time | localtime('YYYY-M-D HH:mm') }} 
                </li>
                <!-- 回复数 -->
                <li>
                  <i class="el-icon-chat-line-square"></i>({{reply.reply_number }}) 
                </li>
                <li v-if="!closed && !editList[index]">
                  <a @click="createReply(index)">回复</a>
                </li>
                <li v-if="editList[index]">
                  <a @click="cancelCreateReply(index)">收起</a>
                </li>
                <div  v-if="canDelete(reply.write_by.id)" style="position: absolute; right: 10px; display: inline-block; ">
                  <el-button @click="deleteReply(reply.id)" style="font-size:15px; color: grey;align-items: flex-end; " icon="el-icon-delete" size="small" type="text">  </el-button>
                </div>
              </ul>
            </el-row>
            <!-- 回复的主体内容 -->
            <!-- <mavon-editor
              class="md"
              :value="reply.reply_text"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
              :boxShadow="false"
              style="z-index:0;min-height: 50px;"
              
            /> -->
            <div style="border: 1px solid #2f2f2f13; border-radius: 4px;">
              <v-md-preview :text="reply.reply_text" ></v-md-preview>
            </div>
              
            <div  v-show="editList[index]">
              <el-input 
                type="textarea"
                placeholder="请输入评论,支持Latex 和 markdown 语法"
                v-model="textList[index]"
                maxlength="2000"
                show-word-limit
                style="margin-top: 3px;"
                :autosize="{ minRows: 2, maxRows: 10 }"
              > </el-input>
              <div style="text-align: right; ">
                <el-button type="text" style="font-size:15px" @click="finishCreateReply(index)" >提交</el-button> 
              </div>
            </div>
          </el-col>


        </el-row>

        <div v-if="reply.reply_number > 0">
          <Row type="flex" justify="end">
            <Col :span="23">
              <reply-tree-node :replies="reply.sub_reply" :reply_to="reply.write_by.username"
                              :open="open_next[index]" :open_next="reply.open_next"
                              :closed="closed" :init="init" :goUser="goUser"></reply-tree-node>
            </Col>
          </Row>
        </div>
        <el-divider v-if="!reply.reply_to && index !== replies.length - 1"></el-divider>
        <el-dialog title="确认删除" :visible.sync="deleting">
          确定要删除这个回复吗？
          <!-- 底部，取消或确定 -->
          <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click.native="cancelDeleteReply">{{$t('m.Cancel')}}</el-button>
            <el-button type="primary" @click.native="finishDeleteReply">{{$t('m.Sure')}}</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  import { USER_TYPE } from '@/utils/constants'
  export default {
    name: 'ReplyTreeNode',
    props: {
      open: {
        type: Boolean,
        default: false
      },
      replies: {
        type: Array,
        required: true
      },
      reply_to: {
        type: String,
        default: ''
      },
      creatingID: {
        type: Number,
        default: 0
      },
      reply_text: {
        type: String,
        default: ''
      },
      open_next: {
        type: Array
      },
      closed: {
        type: Boolean,
        default: false
      },
      goUser: {
        type: Function
      },
      init: {
        type: Function
      }
    },
    data () {
      return {
        textList: [],
        editList: [],
        deleting: false
      }
    },
    mounted () {
      for (var i = 0; i < this.replies.length; i++) {
        this.textList.push('')
        this.editList.push(false)
      }
    },
    computed: {
      ...mapGetters(['user', 'theme', 'avatar']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    },
    methods: {
      openOrClose (index) {
        this.open_next.splice(index, index + 1, !this.open_next[index])
      },
      createReply (index) {
        this.editList[index] = true
        console.log(this.editList)
        console.log(this.replies[index].id)
        this.currentReply = {}
        this.currentReply.reply_to = this.replies[index].id
        this.currentReply.reply_to_discussion = false
        Vue.set(this.editList, index, this.editList[index])
      },
      cancelCreateReply (index) {
        this.editList[index] = false
        Vue.set(this.editList, index, this.editList[index])
      },
      finishCreateReply (index) {
        if (!this.textList[index]) { return }
        this.currentReply.reply_text = this.textList[index]
        let that = this
        api['createReply'](this.currentReply).then(res => {
          this.editList[index] = false
          Vue.set(this.editList, index, this.editList[index])
          that.init()
        }).catch()
      },
      canDelete (id) {
        return id === this.user.id || this.isAdmin
      },
      deleteReply (index) {
        this.deleting = true
        this.del_id = index
      },
      finishDeleteReply () {
        api.deleteReply({id: this.del_id}).then(res => {
          this.deleting = false
          this.init()
        })
      },
      cancelDeleteReply () {
        this.deleting = false
      }
    }
  }
</script>

<style scoped>
  .content-container {
    padding: 0 20px 10px 30px;
  }
  .detail > li{
    margin-left: 5px;
    display: inline-block;
  }
</style>